<template>
  <div class="message-container">
    <div class="message-header">
      <div class="header-content">
        <i class="el-icon-chat-line-round header-icon"></i>
        <h1 class="header-title">留言板</h1>
        <p class="header-subtitle">分享您的想法与建议</p>
      </div>
    </div>

    <div class="message-content">
      <div class="action-bar">
        <el-button 
          type="primary" 
          size="medium" 
          @click="addMessage"
          class="add-btn"
          icon="el-icon-edit">
          添加留言
        </el-button>
      </div>

      <div class="message-list">
        <el-table 
          :data="tableData" 
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{background: '#f8f9fa', color: '#495057'}">
          <el-table-column
            type="index"
            width="60"
            align="center"
            label="序号">
          </el-table-column>
          <el-table-column
            label="标题"
            width="250">
            <template slot-scope="scope">
              <div class="title-cell">
                <i class="el-icon-document title-icon"></i>
                <span class="title-text" v-text="scope.row.title"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="内容">
            <template slot-scope="scope">
              <div class="content-cell" v-text="scope.row.content"></div>
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            prop="createTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            width="120"
            label="状态"
            align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.answer ? 'success' : 'info'" size="small">
                {{ scope.row.answer ? '已回复' : '待回复' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="readDetail(scope)"
                type="text"
                size="small"
                class="action-btn view-btn">
                <i class="el-icon-view"></i> 查看
              </el-button>
              <el-button
                v-if="!scope.row.answer"
                @click.native.prevent="editor(scope)"
                type="text"
                size="small"
                class="action-btn edit-btn">
                <i class="el-icon-edit"></i> 编辑
              </el-button>
              <el-button 
                @click="_delete(scope)" 
                type="text" 
                size="small"
                class="action-btn delete-btn">
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="changeCP"
          @prev-click="changeCP"
          @next-click="changeCP"
          :total="total"
          :page-size="10"
          :pager-count="5">
        </el-pagination>
      </div>
    </div>

    <!-- 添加/编辑留言对话框 -->
    <el-dialog
      :title="messageTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="600px"
      custom-class="message-dialog"
      :before-close="handleClose">
      <el-form
        :model="message"
        :rules="rules"
        status-icon
        ref="ruleForm"
        class="message-form">
        <el-form-item prop="title">
          <el-input
            placeholder="请输入标题（最多50个字符）"
            v-model="message.title"
            maxlength="50"
            show-word-limit
            class="form-input">
            <template slot="prefix">
              <i class="el-icon-edit-outline input-icon"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8}"
            placeholder="请输入留言内容"
            v-model="message.content"
            maxlength="500"
            show-word-limit
            class="form-textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="dialog-cancel-btn">取消</el-button>
        <el-button type="primary" @click="dialogSure" class="dialog-confirm-btn">确定</el-button>
      </span>
    </el-dialog>

    <!-- 留言详情对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="留言详情"
      :visible.sync="readDetailStatus"
      width="700px"
      custom-class="detail-dialog"
      :before-close="() => {readDetailStatus=false}">
      <div class="detail-container">
        <h2 class="detail-title" v-text="selfMessage.title"></h2>
        <div class="message-item user-message">
          <div class="message-header">
            <!-- <el-avatar :size="40" :src="require('@/assets/images/user-avatar.png')" class="message-avatar"></el-avatar> -->
            <div class="message-info">
              <span class="message-author" v-text="selfName"></span>
              <span class="message-time" v-text="selfMessage.createTime"></span>
            </div>
          </div>
          <div class="message-content" v-text="selfMessage.content"></div>
        </div>
        
        <div class="message-item admin-message" v-if="selfMessage.answer">
          <div class="message-header">
            <!-- <el-avatar :size="40" :src="require('@/assets/images/admin-avatar.png')" class="message-avatar"></el-avatar> -->
            <div class="message-info">
              <span class="message-author">管理员</span>
              <span class="message-time" v-text="selfMessage.answerTime"></span>
            </div>
          </div>
          <div class="message-content" v-text="selfMessage.answer"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRegister: false,
      message: {
        title: "",
        content: "",
        id: ''
      },
      readDetailStatus: false,
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入留言内容', trigger: 'blur' },
          { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
        ],
      },
      total: 0,
      messageTitle: '添加留言',
      dialogVisible: false,
      tableData: [],
      cp: 1,
      selfName: '',
      selfMessage: {
        content: '',
        createTime: '',
        answer: '',
        title: '',
        answerTime: ''
      }
    }
  },
  activated() {
    this.getMessageList()
  },
  methods: {
    getMessageList() {
      this.$axios
          .post("/api/message/getSelfList", {
            cp: this.cp,
            user_id: JSON.parse(localStorage.getItem('user')).user_id
          })
          .then(res => {
            this.tableData = res.data.data.data
            this.tableData.forEach(item => {
              item.createTime = (item.createTime.split('.')[0]).replace('T', ' ')
              item.answerTime = item.answerTime ? (item.createTime.split('.')[0]).replace('T', ' ') : ''
            })
            this.total = res.data.data.total
          })
          .catch(err => {
            console.log(err)
          })
    },
    changeCP(val) {
      this.cp = val
      this.getMessageList()
    },
    addMessage() {
      this.messageTitle = '添加留言'
      this.message.title = ''
      this.message.content = ''
      this.message.id = ''
      this.dialogVisible = true
    },
    editor(row) {
      this.messageTitle = '编辑留言'
      this.message.title = row.row.title
      this.message.content = row.row.content
      this.message.id = row.row.id
      this.dialogVisible = true
    },
    _delete(row) {
      this.$confirm('确定要删除这条留言吗？删除后无法恢复', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'delete-confirm'
        })
        .then(() => {
          this.$axios.post('/api/message/delete', {
            id: row.row.id
          })
            .then(res => {
              if (res.data.code == '001') {
                this.getMessageList()
                this.notifySucceed(res.data.msg)
              } else {
                this.notifyError(res.data.msg)
              }
            })
            .catch(err =>{
              this.notifyError(err.message)
            })
        })
        .catch(()=>{})
    },
    readDetail(row) {
      this.selfMessage.content = row.row.content
      this.selfMessage.title = row.row.title
      this.selfMessage.answer = row.row.answer
      this.selfMessage.createTime = row.row.createTime
      this.selfMessage.answerTime = row.row.answerTime
      this.selfName = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).userName : ''
      this.readDetailStatus = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    dialogSure() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在提交...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          
          if (this.messageTitle == '添加留言') {
            this.$axios
              .post("/api/message/addMessage", {
                title: this.message.title,
                content: this.message.content,
                user_id: JSON.parse(localStorage.getItem('user')).user_id
              })
              .then(res => {
                loading.close();
                if (res.data.code == '001') {
                  this.getMessageList()
                  this.dialogVisible = false
                  this.message.title = ''
                  this.message.content = ''
                  this.notifySucceed(res.data.msg);
                } else {
                  this.notifyError(res.data.msg);
                }
              })
              .catch(err => {
                loading.close();
                this.notifyError(err.message);
              })
          } else if (this.messageTitle == '编辑留言') {
            this.$axios
              .post("/api/message/update", {
                title: this.message.title,
                content: this.message.content,
                id: this.message.id
              })
              .then(res => {
                loading.close();
                if (res.data.code == '001') {
                  this.getMessageList()
                  this.dialogVisible = false
                  this.message.title = ''
                  this.message.content = ''
                  this.notifySucceed(res.data.msg);
                } else {
                  this.notifyError(res.data.msg);
                }
              })
              .catch(err => {
                loading.close();
                this.notifyError(err.message);
              })
          }
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style>
.message-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.message-header {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1140px;
  margin: 0 auto;
}

.header-icon {
  font-size: 36px;
  margin-right: 15px;
  vertical-align: middle;
}

.header-title {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  vertical-align: middle;
}

.header-subtitle {
  margin: 10px 0 0;
  font-size: 16px;
  opacity: 0.9;
}

.message-content {
  background-color: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.action-bar {
  margin-bottom: 20px;
  text-align: right;
}

.add-btn {
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 20px;
  padding: 10px 25px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(74, 172, 254, 0.3);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(74, 172, 254, 0.4);
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
}

.custom-table::before {
  display: none;
}

.title-cell {
  display: flex;
  align-items: center;
}

.title-icon {
  color: #4facfe;
  margin-right: 10px;
  font-size: 18px;
}

.title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

.action-btn {
  padding: 5px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.view-btn {
  color: #4facfe;
}

.view-btn:hover {
  background-color: rgba(79, 172, 254, 0.1);
}

.edit-btn {
  color: #67c23a;
}

.edit-btn:hover {
  background-color: rgba(103, 194, 58, 0.1);
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background-color: rgba(245, 108, 108, 0.1);
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
}

/* 对话框样式 */
.message-dialog {
  border-radius: 12px;
}

.message-form {
  padding: 0 20px;
}

.form-input {
  margin-bottom: 20px;
}

.input-icon {
  color: #4facfe;
  margin-right: 8px;
}

.form-textarea .el-textarea__inner {
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.dialog-cancel-btn {
  border-radius: 20px;
  padding: 10px 25px;
  margin-right: 15px;
}

.dialog-confirm-btn {
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 20px;
  padding: 10px 25px;
}

/* 详情对话框样式 */
.detail-dialog {
  border-radius: 12px;
}

.detail-container {
  padding: 0 20px;
}

.detail-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 22px;
}

.message-item {
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.user-message {
  border-left: 4px solid #4facfe;
}

.admin-message {
  border-left: 4px solid #67c23a;
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.message-avatar {
  margin-right: 15px;
}

.message-info {
  display: flex;
  flex-direction: column;
}

.message-author {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-content {
  line-height: 1.8;
  color: #555;
  font-size: 15px;
}

/* 全局覆盖样式 */
.delete-confirm {
  border-radius: 12px !important;
}

.delete-confirm .el-message-box__header {
  background: linear-gradient(135deg, #f85032 0%, #e73827 100%);
  border-radius: 12px 12px 0 0;
  padding: 15px 20px;
}

.delete-confirm .el-message-box__title {
  color: white;
}

.delete-confirm .el-message-box__content {
  padding: 25px 20px;
}

.delete-confirm .el-message-box__btns {
  padding: 0 20px 20px;
  justify-content: center;
}

.delete-confirm .el-button {
  border-radius: 20px;
  padding: 10px 25px;
}

.delete-confirm .el-button--primary {
  background: linear-gradient(135deg, #f85032 0%, #e73827 100%);
  border: none;
}

.custom-table .el-table__header-wrapper th {
  font-weight: 600;
}

.custom-table .el-table__body tr:hover td {
  background-color: #f5f9ff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #4facfe;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-header {
    padding: 20px;
  }
  
  .header-title {
    font-size: 24px;
  }
  
  .message-content {
    padding: 15px;
  }
  
  .action-bar {
    text-align: center;
  }
  
  .add-btn {
    width: 100%;
  }
}
</style>